<template>
	<view>
		<view class="publish-textarea">
			<textarea value="" v-model="textareas" placeholder="请输入发表的内容..." />
		</view>
		<view class="publish-upload-image">
			<text>上传图片</text>
			<image src="../../static/shangchaun.png" mode=""  @click="chooseImages"></image>
		</view>
		<view class="publish-upload-picture">
			<block v-for="(item,index) in temImages":key="index">
				<view class="upload-post">
					<image class="upload-img" :src="item" mode="aspectFill"></image>
					<view class="remove-img">
						<image src="../../static/shanchu.png" mode="" @click="removeImg(index)"></image>
					</view>
				</view>
			</block>
		</view>
		
		<view class="upload-text-yun" @click="fabiao">
			<text>发表</text>
		</view>
		
		<!-- 反馈组件 -->
		<HMmessages ref="HMmessages" @complete="HMmessages = $refs.HMmessages" @clickMessage="clickMessage"></HMmessages>
		<!-- 反馈组件 -->
		<view v-if="shows">
			<home-load></home-load>
		</view>
	</view>
</template>

<script>
	//引入时间模块
	var util = require('../../components/timer.js');
	var time = util.formatTime(new Date());
	
	//引入上传add模块
	import loadingUser from '../../components/uploadImg.js'
	
	//顶部消息提示插件
	 import HMmessages from "@/HMtolel/HM-messages/HM-messages.vue"
	
	export default {
		data() {
			return {
				temImages:[],
				textareas:'',
				userinfoData:{},//上传者信息
				shows:false,
				give:true,//上传字段
				num:0 //赞
			}
		},
		components:{
			HMmessages
		},
		methods: {
			//上传图片
			chooseImages(){
				uni.chooseImage({
				    count: 6, //默认9
				    sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				}).then(res=>{
					// console.log(res[1].tempFilePaths)
					this.temImages = res[1].tempFilePaths
				}).catch(err=>{
					console.log(err)
				})
			},
			
			//删除图片
			removeImg(index){
				// console.log(index)
				this.temImages.splice(index,1)
			},
			
			//发表
			fabiao(){
				if(this.textareas==''){
					// console.log('请输入文字')
					this.HMmessages.show("请输入文字",{icon:'error',fontColor:'#000000',background:'#f40000',iconColor:'#000000'})
					
				}else if(this.temImages.length<1){
					// console.log('请输入文字')
					this.HMmessages.show("请上传不少于一张的图片",{icon:'error',fontColor:'#000000',background:'#f40000',iconColor:'#000000'})
				}else{
					//发表前判断是否登录
					this.userinfo()
				}
			},
			//判读用户是否登录
			userinfo(){
				const db = wx.cloud.database()
				db.collection('users').get().then(res=>{
					console.log(res)
					if(res.data.length==0){
						console.log('没有登录')
						this.HMmessages.show("请先去个人中心登录",{icon:'error',fontColor:'#000000',background:'#f40000',iconColor:'#000000'})

					}else{
						console.log('已经登录')
						this.startUpload(res.data)
						//shows
						this.shows = true
					}
				}).catch(err=>{
					console.log(err)
				})
			},
			
			//全部开始上传
			async startUpload(res){
				//图片链街开始上传数据库
				const uploadImg = await this.uploadImg()
				console.log(uploadImg)
				
				await this.clounData(uploadImg,res)
			},
			
			//上传图片给数据库
			uploadImg(){
				var imgfilepath =[];
				return new Promise((resolve,reject)=>{
					this.temImages.forEach(value=>{
						// console.log(value)
						//上传随机名字字符串操作
						let imgion = value.lastIndexOf('.')
						let eximg = value.slice(imgion)
						let cloundpath = `${Date.now()}${eximg}`
						wx.cloud.uploadFile({
							cloudPath:'images/'+cloundpath,//上传到哪个文件夹
							filePath:value
						}).then(res=>{
							// console.log(res.fileID)
							imgfilepath.push(res.fileID) //放到数组中一次性返回
							
							//异步问题，要判断，不然不会等待后面的图片是否返回
							if(imgfilepath.length == this.temImages.length){
								resolve(imgfilepath)
							}
						}).catch(err=>{
							console.log(err)
						})
					})
				})
			},
			
			//图片文字一起上传给数据库
			clounData(uploadImg,res){
				let Udatabase = {
					uploadImg:uploadImg ,//图片
					textarea:this.textareas,
					userinfoData:res,
					time:time,
					give:this.give,
					likes:this.num
				}
				const db = wx.cloud.database()
				db.collection('textarea').add({
					data:Udatabase,
					createTime:db.serverDate()
				}).then(res=>{
					console.log(res)
					this.shows = true
					this.HMmessages.show("发表成功",{icon:'success',fontColor:'#000000',background:'#04f414',iconColor:'#000000'})
					//发表后向上回退一层
					wx.navigateBack({
					  delta: 1
					})
					
					//页面刷新
					let shuaxin = true
					this.$store.commit('shuaxinPage',shuaxin)
				}).catch(err=>{
					console.log(err)
				})
			}
		}
	}
</script>

<style lang="scss">
	.publish-textarea{
		width: 100%;
		height: 400upx;
		padding: 25upx;
		box-sizing: border-box;
		textarea{
			width: 100%;
			height: 100%;
		}
	}
	.publish-upload-image{
		padding: 25upx;
		display: flex;
		flex-direction: column;
		border-top: 1px solid #ebebeb;
		text{
			color: #717171;
			padding-left: 20upx;
		}
		image{
			margin:20upx ;
			width: 200upx;
			height: 200upx;
		}
	}
	.publish-upload-picture{
		display: flex;
		justify-content: start;
		flex-wrap: wrap;
		padding-left: 10upx;
		.upload-post{
			position: relative;
		}
		.upload-img{
			width: 200upx;
			height: 200upx;
			padding: 20upx;
		}
		.remove-img{
			position: absolute;
			top: 0;
			right: 0;
			image{
				width: 50upx;
				height: 50upx;
			}
		}
	}
	.upload-text-yun{
		margin-top: 20upx;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: auto;
		text{
			
			padding: 15upx 150upx;
			background-color: #55aaff;
			border-radius: 15upx;
			color: #ffffff;
		}
	}
</style>
